<template>
  <div class="cart">
    <div class="none" v-show="noDate">
      <img src="@/assets/sousuomendian04.png" alt="">
      <p>当前暂无内容</p>
    </div>
    <div class="has_goods">
      <div class="item" v-for="(item, index) in goods" :key="index">
        <img src="@/assets/gouwuche03.png" @click="checkClick(index)" v-if="!item.check" class="check-box" alt="">
        <img src="@/assets/gouwuche01.png" @click="checkClick(index)" v-else class="check-box" alt="">
        <span class="img"><img :src="item.goodsInfo.img" class="goods-img" alt=""></span>
        <div class="cons">
          <p class="goods-info">
            <span class="goods-name">{{item.goodsInfo.title}}</span>
            <img src="@/assets/gouwuche04.png" @click="delGoods(item.id)" alt="">
          </p>
          <div class="goods-price">
            <p class="price">¥{{item.goodsInfo.price}}</p>
            <div class="operate">
              <span @click="updateNum(index, '0')"><img src="@/assets/gouwuche06.png"></span>
              <span class="pay_num">{{item.num}}</span>
              <span @click="updateNum(index, '1')"><img src="@/assets/gouwuche07.png"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fixed" v-show="goods&&goods.length>0">
      <div class="left">
        <img src="@/assets/gouwuche03.png" v-if="!isAll" @click="allCheck" class="check-box" alt="">
        <img src="@/assets/gouwuche01.png" v-else @click="allCheck" class="check-box" alt="">
        <span class="all-check">全选</span>
        <span>应付: <em>¥{{allPrice}}</em></span>
      </div>
      <div class="right" @click="goToPay">去付款</div>
    </div>
  </div>
</template>

<script>
import { AlertModule } from "vux";
import {shopcartlists, getDelGoods, getSetCount} from '@/api/api'
export default {
  data () {
    return {
      goods: [],
      goodsNum: "",
      isAll: false,
      allPrice: 0,
      noDate: false,
    }
  },
  created () {
    this.getCartLists();
  },
  methods: {
    router (path) {
      this.$router.push(path)
    },
    // 获取购物车列表
    getCartLists() {
      shopcartlists().then((res) => {
        let data = res.data.data
        if(res.data.code == '200'){
          for(var i in data){
            data[i].check = false
            this.goods.push(data[i])
          }
          if(res.data.data.length == 0){
            this.noDate = true;
          console.log(this.noDate)
          }          
        }        
      }).catch((err) => {
        console.dir(err)
      })
    },
    // 删除商品
    delGoods(goosid) {
      getDelGoods(goosid).then((res) => {
        this.goods = [];
        if(res.data.code == '200'){
          this.getCartLists()
        }        
        AlertModule.show({
          title: '温馨提示',
          content: res.data.msg,
          onHide: () => {
          }
        })
      }).catch((err) => {
        console.dir(err)
      })
    },
    // 更改数量
    updateNum(index, status) {
      let num = "";
      if(status == '1'){
        num = 1;
        this.goods[index].num++;
      }else{
        if(this.goods[index].num <= 1){
          return;
        }
        num = -1;
        this.goods[index].num--;
      }
      this.isAll = false;
      this.allCheck()
      getSetCount(this.goods[index].id, num).then((res) => {
      }).catch((err) => {
        console.dir(err)
      })
    },
    // 选中按钮
    checkClick(index) {
      this.goods[index].check = !this.goods[index].check
      this.allPrice = (this.goods[index].check) ? this.goods[index].goodsInfo.price*this.goods[index].num + Number(this.allPrice) : Number(this.allPrice) - this.goods[index].goodsInfo.price*this.goods[index].num
      var count = 0;
      for(var i in this.goods){
        if(this.goods[i].check){
          count++
        }
      }
      if(count == this.goods.length){
        this.isAll = true
      }else{
        this.isAll = false
      }
    },
    //  全选按钮
    allCheck() {
      this.allPrice = 0
      this.isAll = !this.isAll
      for(var i in this.goods){
        if(this.isAll){
          this.goods[i].check = true
          this.allPrice = this.goods[i].goodsInfo.price*this.goods[i].num + Number(this.allPrice)
        }else{
          this.goods[i].check = false
        }
      }
    },
    // 去支付
    goToPay() {
      let carts = [];
      for(var i in this.goods){
        if(this.goods[i].check){
          var obj = {id:this.goods[i].shop_id ,num:this.goods[i].num, cart_ids: this.goods[i].id}
          carts.push(obj);
        }
      }
      this.$router.push({
        path: "./goodsConfirmOrder",
        query: {
          goodsLists: JSON.stringify(carts)
        }
      })
    }
  }
}


</script>
<style lang="stylus" scoped>
.cart
  padding-bottom 5rem
  box-sizing border-box
  background-color #fff
  min-height 100vh
  box-sizing border-box
  .item
    padding 1.5rem
    display flex
    .check-box
      width 1.8rem
      height 1.8rem
      max-width 1.8rem
      margin-right 1rem
      margin-top 2.6rem
      img
        width 100%
        display block
    input.hidden
      display none
    .img
      display flex
      min-width 9.4rem
      height 7rem
      max-width 9.4rem
      margin-right 1rem
      .goods-img
        object-fit cover
    .cons
      flex 1
      position relative
      .goods-info
        .goods-name
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
          font-size 1.5rem
          color #333
          display block
          width calc(100vw - 22rem)
        img
          position absolute
          width 1.4rem
          right 1.5rem
          top .4rem
      .goods-price
        .price
          position absolute
          bottom 0
          color #A81E27
          font-size 1.5rem
          font-weight 500
          line-height 2.5rem
        .operate
          display flex
          flex 1
          position absolute
          right 0
          bottom 0
          span
            display block
            flex 1
            max-width 2.5rem
            max-height 2.5rem
            width 2.5rem
            height 2.5rem
            box-sizing border-box
            border 1px solid #e5e5e5
            text-align center
            line-height 2.5rem
            img
              width 1.1rem
              display inline-block
              vertical-align middle
              position relative
              top -.2rem
          .pay_num
            border none
            text-align center
            width 5rem
            line-height 2.5rem    
            max-width 4.6rem      
            width 4.6rem
            border-top 1px solid #e6e6e6
            border-bottom 1px solid #e6e6e6
            box-sizing border-box
            font-size 1.7rem
            color #313133
            font-weight 500
  .fixed
    position fixed
    bottom 0
    height 5rem
    line-height 5rem
    display flex
    width 100%
    box-shadow 1px 3px 7px rgba(0,0,0,.2)
    .left
      flex 2
      font-size 1.6rem
      color #333
      .all-check
        margin-right 1.5rem
        margin-left 3.8rem
      img
        position absolute
        left 0
        width 1.8rem
        left 1.5rem
        top 1.6rem
      em
        font-size 1.5rem
    .right
      flex 1
      background-color #19316B
      color #fff
      font-size 1.5rem
      font-weight 500
      text-align center  
  .none
    img
      position absolute
      top 20.3rem
      width 7.25rem
      left 50%
      margin-left -3.625rem
    p
      color #666
      font-size 1.3rem
      text-align center
      position absolute
      width 100%
      top 32rem
</style>